<template>
  <div id="wrap">
        <div >
<!--          <router-link to="/" id="home" style="float: left;font-size: 30px">返回</router-link>-->
          <div id="name" style="text-align: center;font-size: 30px;font-weight: bold!important; ">热血格斗</div>
        </div>
    <div id="show_box">

      <canvas id="nes-canvas" :width="256" :height="240" />
    </div>
    <!-- 摇杆容器 -->
    <div id="direction"></div>
    <!-- 按键容器 -->
    <div id="user_btn_box"></div>

  </div>
</template>

<script>
var  hasLoad = false
import axios from 'axios'
// let VirtualNesBtn = require("../js/nes_btn.js")
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      baseUrl:this.$http.imgUrl(''),
    }
  },
  mounted() {
    window.isGaming = true
    initGame(this.$route.params,this.clickBtn)
  },
  destroyed() {
    window.isGaming = false
  },
  methods:{
    clickBtn(){
      //如果游戏信息为空 则return
      //fullScreen(document.querySelector('#wrap'))
      //加载游戏
      // console.log("ddddsadasd",this.$route,this.$route.params)
      nes_load_url("nes-canvas", this.baseUrl+ this.$route.params.gameUrl)
      //隐藏加载按钮
      // this.style.display = 'none'
    },
  }
}
//获取屏幕宽度(包含浏览器地址栏)
//var device_w = window.screen.width
// alert(device_w)
// alert(document.documentElement.clientWidth)
// alert(document.documentElement.clientHeight)
//容器应该适应高度
//var canvas_box_width = device_w - 21 //减去
var gameInfo = null //全局保存游戏信息

function get(url){
  return new Promise((resolve,reject)=>{
    axios.get(url).then(function (res) {
      resolve(res.data)
    }).catch(function (err) {
      console.log(err)
    })
  });
}


function initGame(data,callback) {
//获取游戏列表，并init页面
  //获取游戏信息
  function getGameList(cb) { //异步操作
    // new Promise((resolve,reject)=>{
    //   axios.get('http://192.168.0.105:88/imgs/game_list.json').then(function (res) {
    //     resolve(res.data)
    //   }).catch(function (err) {
    //     console.log(err)
    //   })
    // });
    // get('http://192.168.0.105:88/imgs/game_list.json').then((data)=>{
      cb(data);
      callback()
    // })
  }
  getGameList(pageInit)
  //禁止双击缩放
  document.addEventListener('dblclick', function (e) {
    e.preventDefault()
  })

  // //监听加载按钮
  // document.querySelector('#btn_load').onclick = function () {
  //   //如果游戏信息为空 则return
  //   if (!gameInfo) return
  //   //fullScreen(document.querySelector('#wrap'))
  //   //加载游戏
  //   nes_load_url("nes-canvas", "http://192.168.0.105:88/imgs/10f737ca-7330-4811-bb4a-a7254d652d92.nes")
  //   //隐藏加载按钮
  //   this.style.display = 'none'
  // }

  //实例化NES按钮
  function VirtualNesBtn(opt){
    //接收容器的标识
    this.el = opt.el
    //接收回调
    this.btn_down_fn = opt.btn_down_fn //fn
    this.btn_up_fn = opt.btn_up_fn //fn

    //保存按钮信息
    this.btns_info = []

    //为5个按钮添加带数字后缀的 id
    this.btns_info = [{},{},{},{},{}]
    this.btns_info[0].id = 'btn_select_' + Math.floor(Math.random() * 100000)
    this.btns_info[1].id = 'btn_start_' + Math.floor(Math.random() * 100000)
    this.btns_info[2].id = 'btn_ab_' + Math.floor(Math.random() * 100000)
    this.btns_info[3].id = 'btn_b_' + Math.floor(Math.random() * 100000)
    this.btns_info[4].id = 'btn_a_' + Math.floor(Math.random() * 100000)

    //设定5个按钮的文本名称 "name"
    this.btns_info[0].name = 'SELECT'
    this.btns_info[1].name = 'START'
    this.btns_info[2].name = 'B + A'
    this.btns_info[3].name = 'B'
    this.btns_info[4].name = 'A'

    //配置5个按钮的 keycode 默认为 空格 回车 J K
    this.btns_info[0].keyCode = opt.keyCodes &&　opt.keyCodes[0] || 32
    this.btns_info[1].keyCode = opt.keyCodes &&　opt.keyCodes[1] || 13
    this.btns_info[2].keyCode = 'macro_key'
    this.btns_info[3].keyCode = opt.keyCodes &&　opt.keyCodes[2] || 74
    this.btns_info[4].keyCode = opt.keyCodes &&　opt.keyCodes[3] || 75

  }

//初始化 创建虚拟按钮
  VirtualNesBtn.prototype.init = function(opt){
    var me = this
    //创建5个按键
    var btn_select = document.createElement('span')
    var btn_start = document.createElement('span')
    var btn_ab = document.createElement('span')
    var btn_b = document.createElement('span')
    var btn_a = document.createElement('span')

    //为5个按键设置css类名
    btn_select.classList.add('btn','btn-select')
    btn_start.classList.add('btn','btn-start')
    btn_ab.classList.add('btn','btn-ab')
    btn_b.classList.add('btn','btn-b')
    btn_a.classList.add('btn','btn-a')

    //为5个按键设置id
    btn_select.id = me.btns_info[0].id
    btn_start.id = me.btns_info[1].id
    btn_ab.id = me.btns_info[2].id
    btn_b.id = me.btns_info[3].id
    btn_a.id = me.btns_info[4].id

    //为5个按键设置 文本
    btn_select.innerText = me.btns_info[0].name
    btn_start.innerText = me.btns_info[1].name
    btn_ab.innerText = me.btns_info[2].name
    btn_b.innerText = me.btns_info[3].name
    btn_a.innerText = me.btns_info[4].name

    //创建容器，并将5个按钮插入其中
    var nes_btn_box = document.createElement('div')
    nes_btn_box.classList.add('nes_btn_box')
    nes_btn_box.appendChild(btn_select)
    nes_btn_box.appendChild(btn_start)
    nes_btn_box.appendChild(btn_ab)
    nes_btn_box.appendChild(btn_b)
    nes_btn_box.appendChild(btn_a)

    //插入到目标容器中
    var target = document.querySelector(me.el)
    target.appendChild(nes_btn_box)

    //设置touch事件监听
    target.addEventListener('touchstart',(evt) => {
      //阻止默认事件，防止快速点击时页面放大
      evt.preventDefault()

      //判断点中的是否是虚拟按钮
      var is_nes_btn = me.btns_info.some(function(item){
        return item.id === evt.target.id
      })

      if(is_nes_btn){
        //添加高亮
        evt.target.classList.add('isTouch')
        //处理此次点击
        me.handleBtn(evt,'btn_down')
      }
    })

    target.addEventListener('touchend',(evt) => {
      //判断点中的是否是虚拟按钮
      var is_nes_btn = me.btns_info.some(function(item){
        return item.id === evt.target.id
      })

      if(is_nes_btn){
        //移除高亮
        evt.target.classList.remove('isTouch')
        //处理此次点击
        me.handleBtn(evt,'btn_up')
      }
    })
  }

//对虚拟按键的id进行判断，返回要绑定的 keyCode
  VirtualNesBtn.prototype.getCode = function(id){
    var me = this
    //1.根据id查到按钮信息在数组中的下标
    var index = me.btns_info.findIndex(function(item){
      return item.id === id
    })
    //2.根据下标找到对应的keyCode
    return me.btns_info[index].keyCode
  }

//对按键进行处理
  VirtualNesBtn.prototype.handleBtn = function(evt,type){
    var me = this
    //1.找到keycode
    var keyCode = me.getCode(evt.target.id)
    //2.根据keycode判是否是宏按键
    if(keyCode === 'macro_key'){
      //要触发2个按键
      var evt_tem = {}
      var evt_tem2 = {}
      evt_tem.keyCode = me.btns_info[3].keyCode
      evt_tem2.keyCode = me.btns_info[4].keyCode
      if(type === 'btn_down'){
        me.btn_down_fn && me.btn_down_fn(evt_tem)
        me.btn_down_fn && me.btn_down_fn(evt_tem2)
      }else{
        me.btn_up_fn && me.btn_up_fn(evt_tem)
        me.btn_up_fn && me.btn_up_fn(evt_tem2)
      }
    }else{
      //添加keyCode属性
      evt.keyCode = keyCode
      //不是宏按键则执行相应的回调
      if(type === 'btn_down'){
        me.btn_down_fn && me.btn_down_fn(evt)
      }else{
        me.btn_up_fn && me.btn_up_fn(evt)
      }
    }
  }
  var nesBtn = new VirtualNesBtn({
    el: "#user_btn_box", //容器
    btn_down_fn: (event) => {
      keyboard(nes.buttonDown, event)
    },//虚拟按钮按下时的回调 参数evt
    btn_up_fn: (event) => {
      keyboard(nes.buttonUp, event)
    },//虚拟按钮弹起时的回调 参数evt
    keyCodes: [32, 13, 74, 75] //按顺序分别是 select start b a
  })

  //NES按钮实例初始化
   nesBtn.init()
}



// window.onload = function () {
//
//   //禁止双击缩放
//   document.addEventListener('dblclick', function (e) {
//     e.preventDefault()
//   })
//
//   //监听加载按钮
//   document.querySelector('#btn_load').onclick = function () {
//     //如果游戏信息为空 则return
//     if (!gameInfo) return
//     //fullScreen(document.querySelector('#wrap'))
//     //加载游戏
//     nes_load_url("nes-canvas", "http://192.168.0.105:88/imgs/10f737ca-7330-4811-bb4a-a7254d652d92.nes")
//     //隐藏加载按钮
//     this.style.display = 'none'
//   }
//
//   //实例化NES按钮
//   var nesBtn = new VirtualNesBtn({
//     el: "#user_btn_box", //容器
//     btn_down_fn: (event) => {
//       keyboard(nes.buttonDown, event)
//     },//虚拟按钮按下时的回调 参数evt
//     btn_up_fn: (event) => {
//       keyboard(nes.buttonUp, event)
//     },//虚拟按钮弹起时的回调 参数evt
//     keyCodes: [32, 13, 74, 75] //按顺序分别是 select start b a
//   })
//
//   //NES按钮实例初始化
//   nesBtn.init()
// }

//初次加载判断横竖屏
// handleDirection()

//监听横竖屏切换
// window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", handleDirection, false);



function pageInit(gameInfo) {
  //获取id
  //获取游戏信息
  //gameInfo = gameList[0]
  //展示游戏名称
  // document.querySelector('#name').innerHTML = gameInfo.name

  //根据游戏信息配置摇杆
  var isFourBtn = true
  var color = isFourBtn ? 'lightcoral' : 'royalblue'

  //实例化摇杆 摇杆配置依赖游戏信息
  var joystick = new Joystick({
    el: "#direction",//容器
    color: color,//摇杆颜色
    size: 120,//摇杆大小
    isFourBtn: isFourBtn,//8键模式
    keyCodes: [87, 83, 65, 68],//绑定 上下左右 到 WSAD键
    rotate: 0,//页面强制横屏时使用90
    btn_down_fn: (event) => {
      keyboard(nes.buttonDown, event)
    },//按下时的回调
    btn_up_fn: (event) => {
      keyboard(nes.buttonUp, event)
    },//释放时的回调
  })
  joystick.init()
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
